import {View, Text, StyleSheet, Image} from 'react-native'
import React, {Component} from 'react'
import {padding, roundWithSize, default as styles, margin} from "../../style";
import {inject, observer} from "mobx-react/custom";
import {Store} from "../../store";
import {defaultObj, keyExtractor} from "../../util";
import FastImage from "react-native-fast-image";
import CommonFlatList from "../../component/common/CommonFlatList";

interface TeamProps extends Store {

}

interface TeamState {

}

const placeholderAvatar = require("../../assets/img/avatar_placeholder.png");
@inject("team")
@observer
export default class Team extends Component<TeamProps, TeamState> {


    constructor(props: TeamProps) {
        super(props);
    }

    async componentDidMount() {
        global.showLoading();
        await this.props.team.getTeamMembers();
        global.hideLoading();
    }

    renderCell = ({item, index}) => {
        const {member = defaultObj, userIntegral = 0} = item;
        const {nickName, avatarUrl} = member;
        const avatar = avatarUrl?{uri: avatarUrl}:placeholderAvatar;
        return (<View key={index} style={[padding(16, 27), TeamStyle.rowStyle, {marginTop: index ? 8 : 0}]}>
            <View style={TeamStyle.rowStyle}>
                <FastImage source={avatar} style={roundWithSize(50)}/>
                <Text style={[TeamStyle.bigFont, {marginLeft: 23}]}>{nickName}</Text>
            </View>
            <Text style={TeamStyle.smallFont}>获得积分 {userIntegral}</Text>
        </View>)
    };
    commonFlatList: CommonFlatList;
    _refresh = async () => {
        await this.props.team.getTeamMembers();
        this.commonFlatList.refreshComplete();
    };
    _loadMore = () => {
    };

    render() {
        const {teamList} = this.props.team;
        return (
            <CommonFlatList  ref={commonFlatList => this.commonFlatList = commonFlatList} renderItem={this.renderCell}
                            loadMore={this._loadMore} data={teamList}
                            keyExtractor={keyExtractor} refresh={this._refresh}/>)
    }
}

const TeamStyle = StyleSheet.create({
    container: {},
    rowStyle: {
        justifyContent: "space-between",
        flexDirection: "row",
        backgroundColor: "#fff",
        alignItems: "center",
    },
    bigFont: {
        color: "#333",
        fontSize: 14
    },
    smallFont: {
        color: "#999",
        fontSize: 12
    }
});

 